<template>
  <div class="history-container">
    <div class="items">
      <div class="item" v-for="item in content" :key="item.time">
        <p class="time">{{item.time}}s</p>
        <p class="event" v-html="item.event"></p>
      </div>
    </div>
    <div class="historyNote">
      <p>{{notes[0]}}</p>
      <p>{{notes[1]}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'History',
  data(){
    return{
      content:[
        {
          time: 1950,
          event: `苏联专家指导下的“周边式”、“双周边”式布局；<span class="highlight-a">T型或L型三层住宅</span>`
        },
        {
          time: 1970,
          event: `少数公共设施有序建设；许多<span class="highlight-a">无序建设</span>：“母子宿舍”、“街道工厂”、防震棚、拔“修正主义”绿化`
        },
        {
          time: 1980,
          event: `服务设施扩建；新建<span class="highlight-a">5-6层板楼</span>`
        },
        {
          time: 1990,
          event: `拆旧建新；新建包含<span class="highlight-b">商品房</span>的<span class="highlight-a">高层塔楼</span>`
        }
      ],
      notes: ['▶️住户成分复杂化', '▶️空间布局与建筑风格混乱化']
    }
  },
  mounted(){
    /*通过v-html赋予的类名无法通过CSS定义样式，转而在此设置*/
    const specialText_a = document.querySelectorAll('.highlight-a')
    specialText_a.forEach(element => {
      element.style.color='var(--green)'
      element.style.fontWeight='600'
    })
    const specialText_b = document.querySelectorAll('.highlight-b')
    specialText_b.forEach(element => {
      element.style.color='var(--yellow)'
      element.style.fontWeight='600'
    })
  }
}
</script>

<style scoped>
.history-container{
  display: flex;
  justify-content: space-around;
}

.items{
    width: calc(80% - 24rem);
}

.item{
  margin: 1rem 0;
}

.item > .time{
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--blue);
}

.historyNote{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24rem;
  margin-left: 2rem;
}

.historyNote > p{
  font-weight: 800;
  font-size: 1.25rem;
  height: fit-content;
  margin: 1rem 0;
}

.historyNote > p:nth-child(1){
  color: var(--yellow);
}
.historyNote > p:nth-child(2){
  color: var(--green);
}

@media screen and (max-width: 1200px) {
  .history-container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .items{
    width: 80%;
  }
  .historyNote{
    width: 80%;
    margin-left: 0;
  }
}
</style>